<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="icon" href="bookstore.jpg" type ="image">
    <title>网上书城 - Bookstore</title>  
    <link rel="stylesheet" href="styles.css">  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            margin: 0;  
            padding: 0;  
            background-color: #f4f4f4;  
        }  
        header {  
            background-color: #02460c;  
            color: white;  
            padding: 10px 20px;
            text-align: center;  
            font-weight: bold;
          
        }  
        .container {  
            width: 50%;  
            margin: 0;  
            overflow: hidden;  
            background-color: white;  
            padding: 1px;  
        }  
        .product-list {  
            display: flex;  
            flex-wrap: wrap;  
            justify-content: space-between;  
        }
        .product-item {  
            border: 1px solid #ddd;  
            margin: 4px;  
            padding: 4px;  
            text-align: center;  
            width: 20%;  
            background-color: #f9f9f9;  
            height: 260px;
        } 
        .product-item img {
            width: 50%;
            height: 75%;
        }
        .product-item p {  
            margin: 0;  
            padding: 0;  
        }
 
        footer {  
            background-color: #3f7d3d;  
            color: white;  
            text-align: center;  
            position: fixed;
	        left: 0;
	        bottom: 0;
	        width: 100%;
        }  
        @media (max-width: 768px) {  
            .product-item {  
                width: calc(50% - 40px);  
            }  
        }  
        @media (max-width: 480px) {  
            .product-item {  
                width: calc(100% - 40px);  
            }  
        }  
        a{
            padding: 0 8px;   /*设置间距 */
             text-decoration: none;    /*隐藏下划线 */
        }
        .Search>input {
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        .Search{
            background-color: rgb(182, 183, 126);
            text-align: right;
        }
        .Search>button {
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #00AB00;
            margin: 0;
        }
        .bodyMap {
            background-color: rgb(252, 253, 238);
            text-align: left center;
            width: 50%;
            height: auto;
            position: absolute;
            left: 24%;
            margin: 0;
        }

    </style>  
</head>  
<body>  
    <h2>网上书城 - Bookstore</h2 >  
<header>
    <a href="https://baidu.com" style="color: #ddd;">文学</a>
    <a href="https://baidu.com" style="color: #ddd;">生活</a>
    <a href="https://baidu.com" style="color: #ddd;">计算机</a>
    <a href="https://baidu.com" style="color: #ddd;">外语</a>
    <a href="https://baidu.com" style="color: #ddd;">经营</a>
    <a href="https://baidu.com" style="color: #ddd;">励志</a>
    <a href="https://baidu.com" style="color: #ddd;">社科</a>
    <a href="https://baidu.com" style="color: #ddd;">学术</a>
    <a href="https://baidu.com" style="color: #ddd;">少儿</a>
    <a href="https://baidu.com" style="color: #ddd;">艺术</a>
    <a href="https://baidu.com" style="color: #ddd;">原版</a>
    <a href="https://baidu.com" style="color: #ddd;">科技</a>
    <a href="https://baidu.com" style="color: #ddd;">考试</a>
    <a href="https://baidu.com" style="color: #ddd;">生活百科</a>
    <a href="https://baidu.com" style="color: #ffee00;">全部目录</a>
</header>

<div class="Search">Search &nbsp <input type="text" placeholder="Search for books"><button>搜索</button></div>
<div class="bodyMap">
    <p class="position">商品目录</p>
    <hr>
    <p class="position">计算机类</p>
    <hr>
    <div id="ust"><b>PRODUCT UST</b></div>
    <div class="product-list">  
        <div class="product-item">  
            <img src="book1.png" alt="书名1" style="width:100%">  
            <p>书名：时空穿行</p>  
            <p>价格：10000</p>  
        </div>  
        <div class="product-item">  
            <img src="book2.png" alt="书名2" style="width: 100%">  
            <p>书名：震撼心灵的生命感悟</p>  
            <p>价格：100000</p>  
        </div>  
        <div class="product-item">  
            <img src="book3.png" alt="书名3" style="width:100%">  
            <p>书名：赢在影响力</p>  
            <p>价格：10000</p>  
        </div>  
        <div class="product-item">  
            <img src="book4.png" alt="书名4" style="width:100%">  
            <p>书名：谁动了我的奶酪</p>  
            <p>价格：19000098</p>  
        </div>  
        <div class="product-item">  
            <img src="book5.png" alt="书名5" style="width:100%">  
            <p>书名：培养男孩</p>  
            <p>价格：1029903</p>  
        </div>  
        <div class="product-item">  
            <img src="book6.png" alt="书名6" style="width:100%">  
            <p>书名：别做正常的傻瓜</p>  
            <p>价格：239738</p>  
        </div>  
        <div class="product-item">  
            <img src="book7.png" alt="书名7" style="width:100%">  
            <p>书名：学会宽容</p>  
            <p>价格：29848</p>  
        </div>  
        <div class="product-item">  
            <img src="book8.png" alt="书名8" style="width:100%">  
            <p>书名：大勇和小花的欧洲日记</p>  
            <p>价格：29838</p>  
        </div>  
        <div style=" margin: 20px; left: 24%; position: relative;">  
            <button>上一页</button>  
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>下一页</button>
        </div>  
</div>  
 
<footer>  
    网上书城 <td> &nbsp;</td> CONTACT 
    <p>copyright 2008 Bookstore All Right RESERVED</p>  
</footer>  
</body>  
</html>